<template>
  <footer v-if="todos.length">
    <input type="checkbox" v-model="allDone"/>已办事项{{
      doneTodos
    }}/待办事项{{ todos.length }}
    <button @click="handleDelDone">清除已办</button
    ><button @click="handleDelAll">清除全部</button>
  </footer>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  todos: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const emits = defineEmits(['delDone', 'delAll', 'allDone']);
const handleDelDone = () => {
  emits('delDone');
};
const handleDelAll = () => {
  emits('delAll');
};

const doneTodos = computed(() => {
  return props.todos.filter((todo) => todo.done == true).length;
});

//实现复选框的选中效果
const allDone = computed(() => ({
  //get:如果list中所有的元素done为true,才选中,否则不选中
  get() {
    return props.todos.every((todo) => todo.done == true);
  },
  //set:将当前复选框的状态同步到所有代办事项的复选框上
  set(value) {
    emits('allDone', value); /* 调用父组件方法修改 */
  },
}));
</script>

<style scoped>
footer {
  display: flex;
  margin-top: 20px;
  padding: 10px 40px;
  background-color: #87ceeb;
}
footer div {
  flex: 1;
  margin-left: 20px;
}
footer button {
  margin-left: 10px;
  padding: 0 10px;
}
</style>
